<template>
  <div class="pk">
    <div class="gang"></div>
    <div class="dingche"><h1 class="bijiao">车型比较</h1></div>
    <div class="tu">
      <img src="../assets/2-3L-Ecoboost.jpg" alt="" />
      <img src="../assets/Mustang2_3LEcoBoost寰海蓝.jpg" alt="" />
      <img src="../assets/Mustang2_3LEcoBoost掠光.jpg" alt="" />
      <img src="../assets/Mustang2_3LEcoBoost黑耀.jpg" alt="" />
    </div>
    <el-button type="primary" @click="toggleRowExpansion">
      全部{{ isExpansion ? "收缩" : "展开" }}
    </el-button>
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      ref="dataTreeList"
      :default-expand-all="isExpand"
    >
      <el-table-column prop="date" label="" width="340"> </el-table-column>
      <el-table-column
        prop="kd"
        label="新福特MUSTANG（进口）Mustang 2.3L EcoBoost®"
        width="340"
      >
      </el-table-column>
      <el-table-column
        prop="kd2"
        label="新福特MUSTANG（进口）Mustang 2.3L EcoBoost® 寰海蓝天限量版"
        width="340"
      >
      </el-table-column>
      <el-table-column
        prop="kd3"
        label="新福特MUSTANG（进口）Mustang 2.3L EcoBoost® 黑曜魅影特别版"
        width="340"
      >
      </el-table-column>
      <el-table-column
        prop="kd4"
        label="新福特MUSTANG（进口）Mustang 2.3L EcoBoost® 掠光复刻限量版"
        width="340"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "基本数据",
          children: [
            {
              id: 31,
              date: "长x宽x高（mm）",
              kd: "4794x1916x1391",
              kd2: "4794x1916x1391",
              kd3: "4794x1916x1391",
              kd4: "4794x1916x1391",
            },
            {
              id: 32,
              date: "轴距（mm）",
              kd: "2720",
              kd2: "2720",
              kd3: "2720",
              kd4: "2720",
            },
            {
              id: 32,
              date: "前/后轮距（mm）",
              kd: "1582/1656",
              kd2: "1582/1656",
              kd3: "1582/1656",
              kd4: "1582/1656",
            },
            {
              id: 32,
              date: "整备质量（kg）",
              kd: "1702",
              kd2: "1702",
              kd3: "1702",
              kd4: "1702",
            },
          ],
        },

        {
          id: 2,
          date: "卓越性能",
          children: [
            {
              id: 31,
              date: "发动机",
              kd: "2.3L EcoBoost®涡轮增压燃油直喷发动机",
              kd2: "2.3L EcoBoost®涡轮增压燃油直喷发动机",
              kd3: "2.3L EcoBoost®涡轮增压燃油直喷发动机",
              kd4: "2.3L EcoBoost®涡轮增压燃油直喷发动机",
            },
            {
              id: 32,
              date: "排气量 （cc）",
              kd: "2261",
              kd2: "2261",
              kd3: "2261",
              kd4: "2261",
            },
            {
              id: 32,
              date: "最大功率(kW/rpm)",
              kd: "220/5400",
              kd2: "220/5400",
              kd3: "220/5400",
              kd4: "220/5400",
            },
            {
              id: 32,
              date: "最大扭矩（N∙m/rpm）",
              kd: "434/3000",
              kd2: "434/3000",
              kd3: "434/3000",
              kd4: "434/3000",
            },
            {
              id: 32,
              date: "最高速度 （kph）",
              kd: "234",
              kd2: "234",
              kd3: "234",
              kd4: "234",
            },
            {
              id: 32,
              date: "燃油供给",
              kd: "缸内直喷",
              kd2: "缸内直喷",
              kd3: "缸内直喷",
              kd4: "缸内直喷",
            },
            {
              id: 32,
              date: "制动系统",
              kd: "大尺寸强力碟式刹车系统（前：14英寸通风碟，4活塞铝制卡钳； 后：13英寸通风碟，单活塞浮动卡钳）",
              kd2: "大尺寸强力碟式刹车系统（前：14英寸通风碟，4活塞铝制卡钳； 后：13英寸通风碟，单活塞浮动卡钳）",
              kd3: "大尺寸强力碟式刹车系统（前：14英寸通风碟，4活塞铝制卡钳； 后：13英寸通风碟，单活塞浮动卡钳）",
              kd4: "大尺寸强力碟式刹车系统（前：14英寸通风碟，4活塞铝制卡钳； 后：13英寸通风碟，单活塞浮动卡钳）",
            },
            {
              id: 32,
              date: "轮胎规格",
              kd: "255/40 ZR19 夏季胎 倍耐力 P0",
              kd2: "255/40 ZR19 夏季胎 倍耐力 P0",
              kd3: "255/40 ZR19 夏季胎 倍耐力 P0",
              kd4: "255/40 ZR19 夏季胎 倍耐力 P0",
            },
            {
              id: 32,
              date: "轮毂规格",
              kd: "19英寸全黑高级烤漆铝制轮毂",
              kd2: "19英寸哑光黑高级铝制轮毂",
              kd3: "19英寸黑曜魅影特别版10辐轮毂",
              kd4: "19英寸全黑高级烤漆铝制轮毂",
            },
            {
              id: 32,
              date: "座位数",
              kd: "4",
              kd2: "4",
              kd3: "4",
              kd4: "4",
            },
            {
              id: 32,
              date: "变速箱类型",
              kd: "10速手自一体变速箱（带方向盘手动换挡拨片）",
              kd2: "10速手自一体变速箱（带方向盘手动换挡拨片）",
              kd3: "10速手自一体变速箱（带方向盘手动换挡拨片）",
              kd4: "10速手自一体变速箱（带方向盘手动换挡拨片）",
            },
            {
              id: 32,
              date: "驱动型式",
              kd: "配备LSD限滑差速器的后轮驱动系统",
              kd2: "配备LSD限滑差速器的后轮驱动系统",
              kd3: "配备LSD限滑差速器的后轮驱动系统",
              kd4: "配备LSD限滑差速器的后轮驱动系统",
            },
            {
              id: 32,
              date: "油箱容积",
              kd: "58.9 升",
              kd2: "58.9 升",
              kd3: "58.9 升",
              kd4: "58.9 升",
            },
            {
              id: 32,
              date: "排放标准",
              kd: "国VI",
              kd2: "国VI",
              kd3: "国VI",
              kd4: "国VI",
            },
            {
              id: 32,
              date: "前悬挂系统",
              kd: "双球节麦弗逊独立悬挂",
              kd2: "双球节麦弗逊独立悬挂",
              kd3: "双球节麦弗逊独立悬挂",
              kd4: "双球节麦弗逊独立悬挂",
            },
            {
              id: 32,
              date: "后悬挂系统",
              kd: "多连杆独立悬挂",
              kd2: "多连杆独立悬挂",
              kd3: "多连杆独立悬挂",
              kd4: "多连杆独立悬挂",
            },
            {
              id: 32,
              date: "MagneRide® 主动电磁感应悬挂系统",
              kd: "-",
              kd2: "-",
              kd3: "-",
              kd4: "S",
            },
            {
              id: 32,
              date: "转向助力型式",
              kd: "EPAS电动助力转向",
              kd2: "EPAS电动助力转向",
              kd3: "EPAS电动助力转向",
              kd4: "EPAS电动助力转向",
            },
          ],
        },
        {
          id: 5,
          date: "安全科技",
          children: [
            {
              id: 31,
              date: "FordPass™ 福特派互联带远程车辆控制、查询车辆信息、联系经销商、代驾养车等功能",
              kd: "S",
              kd2: "S",
              kd3: "S",
              kd4: "S",
            },
            {
              id: 32,
              date: "导航系统",
              kd: "S",
              kd2: "S",
              kd3: "S",
              kd4: "S",
            },
            {
              id: 32,
              date: "泊车辅助系统",
              kd: "S",
              kd2: "S",
              kd3: "S",
              kd4: "S",
            },
            {
              id: 32,
              date: "Shaker高品质音响系统（9个扬声器）",
              kd: "S",
              kd2: "S",
              kd3: "-",
              kd4: "-",
            },
            {
              id: 32,
              date: "B&O立体声环绕音响（12个扬声器）",
              kd: "-",
              kd2: "-",
              kd3: "S",
              kd4: "S",
            },
          ],
        },
      ],
    };
  },

  methods: {
    // 切换数据表格树形展开
    toggleRowExpansion() {
      this.isExpansion = !this.isExpansion;
      this.toggleRowExpansionAll(this.tableData, this.isExpansion);
    },
    toggleRowExpansionAll(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children !== undefined && item.children !== null) {
          this.toggleRowExpansionAll(item.children, isExpansion);
        }
      });
    },
  },
};
</script>

<style land="less"  scoped>
.el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  position: absolute;
  right: 5%;
  top: 0%;
  z-index: 10;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.pk {
  width: 100%;
}
.el-radio-group {
  font-size: 0;
  top: 18px;
  position: relative;
  float: right;
  right: 79px;
}
.bijiao {
  padding: 30px 0px 30px 0px;
  position: relative;
  left: 44%;
  width: 128px;
  background-color: white;
}
.tu {
  position: relative;
  left: 335px;
  width: 1298px;
}
.tu img {
  margin: 0 -38px 0 0;
}
.gang {
  width: 100%;
  height: 2px;
  background-color: #c9c9c9;
  position: absolute;
  top: 52px;
}
</style>